<template>
	<view class="edit-page flexc">
		<view class="wrap flex1 over-auto">
			<view class="box flexr flexcc">
				<view class="title">项目名称：</view>
				<input type="text" placeholder="请输入项目名称" class="inp" v-model="info.title" />
			</view>
			<view class="box flexr flexcc">
				<view class="title">项目类型：</view>
				<uni-data-select v-model="info.des" placeholder="请选择" :localdata="range" class="inp"></uni-data-select>
			</view>
			<view class="box flexr flexcc">
				<view class="title">开发日期：</view>
				<uni-datetime-picker type="date" v-model="info.date"  />
			</view>
			<view class="box flexr flexcc">
				<view class="title">技术栈：</view>
				<input type="text" placeholder="请输入项目中用到的技术" class="inp" v-model="info.skill" />
			</view>
			<view class="box flexr flexcc">
				<view class="title">项目描述：</view>
				<input type="text" placeholder="用一段话介绍下自己的项目" class="inp" v-model="info.introduce" />
			</view>
			<view class="box1  mt-30">
				<uni-file-picker  v-model='photoList'  mode="grid"  ref='photo' file-mediatype="image" limit="9" title="效果图 : 最多选择9张图片" :auto-upload='false' ></uni-file-picker>
			</view>
			
		</view>
		<view class="btn" @click="submit">发布</view>
	</view>
</template>

<script>
import { defineComponent, reactive, toRefs,ref } from 'vue';
import requestApi from '../../utils/api.js'
export default defineComponent({
	setup() {
		const photo = ref(null)
		const data = reactive({
			info: {
				title: '',
				des: '',
				skill: '',
				date: new Date(),
				introduce:'',
				imgList:[],
			},
			photoList:[],
			range: [
				{ value: 0, text: '小程序' },
				{ value: 1, text: '移动端' },
				{ value: 2, text: 'pc端' },
				{ value: 3, text: 'app' },
				{ value: 4, text: '公众号' },

			],
			
		});
		// 提交
		const submit = ()=>{
			photo.value.upload().then(res=>{
				res.forEach(item=>{
					data.info.imgList.push(item)
				})
				const params = {
					type:'upload',
					data:data.info
				}
				requestApi('home',params).then(ele=>{
					// console.log(ele);
					uni.showToast({
						title:ele.result.message,
						icon:'none'
					})
					if(ele.result.status==='S'){
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
				})
			})
		}
		return {
			...toRefs(data),
			photo,
			submit
		};
	}
});
</script>

<style lang="scss">
page {
	height: 100%;
}
:deep(.uni-select) {
	padding: 0;
	border: none;
}
:deep(.uni-date__x-input){
	font-size: 24upx;
}
.edit-page {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	overflow: auto;
	padding: 20upx;
	background-color: #f2f3f8;
	.wrap {
		padding: 30upx 30upx 50upx;
		border-radius: 20upx;
		background-color: #fff;
	}
	.box {
		height: 60upx;
		margin-bottom: 30upx;
		font-size: 24upx;
		.inp {
			flex: 1;
			height: 100%;
			padding-left: 20upx;
			font-size: 24upx;
			background-color: #f2f3f8;
		}
		.title{
			min-width: 140upx;
		}
	}
	
	.mt-30{
		margin-top: 60upx;
	}
	.btn{
		width: 80%;
		height: 80upx;
		border-radius: 10upx;
		background: linear-gradient(357deg, #F41F4C 0%, #FE5F4C 100%);
		text-align: center;
		line-height: 80upx;
		font-size: 30upx;
		font-weight: bold;
		color: #fff;
		margin: 80upx auto 0;
	}
}
</style>
